<template>
    <div class="enter_stock">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px">

            <el-form-item label="仓库" prop="stockId">
                <el-select v-model="ruleForm.stockId" placeholder="请选择仓库">
                    <el-option label="YTO圆通仓库" value="1"></el-option>
                    <el-option label="自有仓库" value="2"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="条形码" prop="barCode">
                <el-input v-model="ruleForm.barCode" @keyup.enter.native="getDetail" @blur="getDetail"></el-input>
                <div v-if="detail">
                    <el-form label-width="100px" label-position="left" class="sku_detail">
                        <el-form-item label="商品名称">
                            {{detail.goodsName}}
                        </el-form-item>
                        <el-form-item label="SKU码">
                            {{detail.id}}
                        </el-form-item>
                        <el-form-item label="SKU名称">
                            {{detail.goodsSku}}
                        </el-form-item>
                        <el-form-item label="库存">
                            {{detail.stock}}
                        </el-form-item>
                        <el-form-item label="商品图片">
                            <img :src="item.picture" :preview="1" v-for="item in detail.goodsPictures">
                        </el-form-item>
                    </el-form>
                </div>
            </el-form-item>
            <el-form-item label="库存数量" prop="stock">
                <el-input v-model.number="ruleForm.stock"></el-input>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                <el-button @click="cancel(false)">取消</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
  import api from "@/api/goodsStock.service.js";

  export default {
    name: 'enterStock',
    data() {
      return {
        ruleForm: {

        },
        rules: {
          barCode: [
            { required: true, message: '请输入条形码', trigger: 'blur'}
          ],
          stockId: [
            { required: true, message: '请选择仓库', trigger: 'change'}
          ],
          stock: [
            { required: true, message: '请输入库存', trigger: 'blur'}
          ],
        },
        detail: null
      }
    },
    mounted() {
      this.ruleForm = {}
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            api.outStock(this.ruleForm).then(res => {
              if (res.code == 200) {
                this.cancel(true)
                this.$message({
                  message: this.$t('common.operateSucccess'),
                  type: 'success'
                })
              }
            })
          }
        });
      },
      cancel(flag) {
        this.$emit('close', flag)
      },
      getDetail() {
        api.getDetailByBarCode({barCode: this.ruleForm.barCode}).then(res => {
          this.detail = res.value;
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
    .enter_stock {
        .el-select {
            width: 100%;
        }
        .sku_detail {
            img {
                width: 100px;
                height: 100px;
                margin-right:10px;
            }
        }
    }
</style>
<style lang="scss">
    .sku_detail {
        .el-form-item__label {
            color: #99a9bf;
        }
    }
</style>